<template>
  <view class="product">
    <image class="product-image" :src="image ? image : 'https://via.placeholder.com/150x200'" />
    <view class="product-title">
      {{ title }}
    </view>
    <view class="product-price">
      <text class="product-price-favour">
        ￥{{ originalPrice }}
      </text>
      <text class="product-price-original">
        ￥{{ favourPrice }}
      </text>
      <text class="product-tip">
        {{ tip }}
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Product',
  props: ['image', 'title', 'originalPrice', 'favourPrice', 'tip']
}
</script>

<style>
	.product {
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
	}

	.product-image {
		height: 330rpx;
		width: 330rpx;
	}

	.product-title {
		width: 300rpx;
		font-size: 32rpx;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.product-price {
		font-size: 28rpx;
		position: relative;
	}

	.product-price-original {
		color: #E80080;
	}

	.product-price-favour {
		color: #888888;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.product-tip {
		position: absolute;
		right: 10rpx;
		background-color: #FF3333;
		color: #FFFFFF;
		padding: 0 10rpx;
		border-radius: 5rpx;
	}
</style>
